<template>
  <div class="total">
    <el-image :src="pic" fit="contain" lazy @mouseover="mouseover"> </el-image>
    <div class="edit"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

// 鼠标悬浮事件
const mouseover = () => {
  
};

// 接收props
type Props = {
  pic: string;
};
withDefaults(defineProps<Props>(), {
  pic: "",
});

const dialogFormVisible = ref(false);
</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

.total {
  break-inside: avoid;
  width: $item-width * 3;
  height: auto;
  color: #425551;

  .el-image {
    width: 100%;
  }

  img {
    width: $item-width * 2.8;
    margin-left: $item-width * 0.1;
    break-inside: avoid;
    margin-bottom: $item-height;
  }

  .edit {
    margin: $item-height * 0.2;
    text-align: center;
    height: $item-height * 0.4;
  }
}
</style>
